<template>
  <div class="shelf-list" :style="{ top: shelfListTop }">
    <TransitionGroup name="list" tag="div" id="shelf-list">
      <div class="shelf-list-item-wrapper" v-for="item in data" :key="item.id">
        <ShelfItem :data="item" :style="{ height: itemHeight }"></ShelfItem>
        <div class="shelf-list-title-wrapper">
          <span class="shelf-list-title title-small">{{ item.title }}</span>
        </div>
      </div>
    </TransitionGroup>
  </div>
</template>

<script>
import { storeShelfMixin } from '@/utils/mixin';
import ShelfItem from './ShelfItem.vue';
import { realPx, px2rem } from '@/utils/utils';

export default {
  mixins: [storeShelfMixin],
  components: {
    ShelfItem,
  },
  props: {
    top: {
      type: Number,
      default: 94,
    },
    data: Array,
  },
  computed: {
    itemHeight() {
      // w / 250 = h / 350  图片比例为 250/350
      // h = w * 350 / 250
      return ((window.innerWidth - realPx(120)) / 3 / 250) * 350 + 'px';
    },
    shelfListTop() {
      return px2rem(this.top) + 'rem';
    },
  },
};
</script>

<style scoped lang="scss">
@import '../../assets/styles/global';

.shelf-list {
  position: absolute;
  left: 0;
  z-index: 100;
  width: 100%;

  #shelf-list {
    display: flex;
    width: 100%;
    flex-flow: row wrap;
    padding: 0 px2rem(15);
    box-sizing: border-box;
  }

  .shelf-list-item-wrapper {
    flex: 0 0 33.3%;
    width: 33.3%;
    padding: px2rem(15);
    box-sizing: border-box;

    &.list-leave-active {
      display: none;
    }
    &.list-move {
      transition: transform 0.5s;
    }

    .shelf-list-title-wrapper {
      margin-top: px2rem(10);
    }
  }
}
</style>
